<!--
 * @Author: huangximian huangximian@e-ling.com.cn
 * @Date: 2022-06-01 14:15:41
 * @LastEditors: huangximian huangximian@e-ling.com.cn
 * @LastEditTime: 2022-06-06 10:35:26
 * @FilePath: \jcyy-official-website\src\views\android\pages\Jinchuninformation\jinchunindex.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="home_img"><img src="../../../../assets/images/u58.png" alt="" /></div>
    <div class="content_android">
      <div class="tabswitch">
        <div
          :class="item.booer ? 'tabsuw' : ''"
          v-for="item in tablist"
          :key="item.id"
          @click="tabstate(item)"
        >
          {{ item.name }}
        </div>
      </div>

      <!-- 内容 -->
      <div class="jinchun_text">
        <div class="jinchun_a">
          <div class="jinchun_a_div">
            <img src="../../../../assets/images/u100.png" alt="" />
          </div>
          <div class="jinchun_b_div">
            <p>长者在我心中，服务在您身边</p>
            <p>
              近年来，为响应国家号召，各种养老公寓、养老农庄如雨后春芛层出......
            </p>
          </div>
        </div>
        <div class="jinchun_a">
          <div class="jinchun_a_div">
            <img src="../../../../assets/images/u100.png" alt="" />
          </div>
          <div class="jinchun_b_div">
            <p>长者在我心中，服务在您身边</p>
            <p>
              近年来，为响应国家号召，各种养老公寓、养老农庄如雨后春芛层出......
            </p>
          </div>
        </div>
        <div class="jinchun_a">
          <div class="jinchun_a_div">
            <img src="../../../../assets/images/u100.png" alt="" />
          </div>
          <div class="jinchun_b_div">
            <p>长者在我心中，服务在您身边</p>
            <p>
              近年来，为响应国家号召，各种养老公寓、养老农庄如雨后春芛层出......
            </p>
          </div>
        </div>
        <div class="jinchun_a">
          <div class="jinchun_a_div">
            <img src="../../../../assets/images/u100.png" alt="" />
          </div>
          <div class="jinchun_b_div">
            <p>长者在我心中，服务在您身边</p>
            <p>
              近年来，为响应国家号召，各种养老公寓、养老农庄如雨后春芛层出......
            </p>
          </div>
        </div>
         <div class="jinchun_a">
          <div class="jinchun_a_div">
            <img src="../../../../assets/images/u100.png" alt="" />
          </div>
          <div class="jinchun_b_div">
            <p>长者在我心中，服务在您身边</p>
            <p>
              近年来，为响应国家号召，各种养老公寓、养老农庄如雨后春芛层出......
            </p>
          </div>
        </div>
         <div class="jinchun_a">
          <div class="jinchun_a_div">
            <img src="../../../../assets/images/u100.png" alt="" />
          </div>
          <div class="jinchun_b_div">
            <p>长者在我心中，服务在您身边</p>
            <p>
              近年来，为响应国家号召，各种养老公寓、养老农庄如雨后春芛层出......
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tablist: [
        {
          name: "品牌介绍",
          booer: true,
          id: "1",
        },
        {
          name: "文化理念",
          booer: false,
          id: "2",
        },
        {
          name: "发展历程",
          booer: false,
          id: "3",
        },
        {
          name: "企业荣誉",
          booer: false,
          id: "4",
        },
      ],
    };
  },
  methods: {
    tabstate(vlaue) {
      for (const a of this.tablist) {
        if (a.id == vlaue.id) {
          a.booer = true;
        } else {
          a.booer = false;
        }
      }
    },
  },
};
</script>
<style scoped>
.content_android {
  margin: 1.2rem 1.5rem 4rem 1.5rem;
  overflow: hidden;
}
.home_img {
  width: 100%;
  height: 8.6rem;
}
.home_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tabswitch {
  display: inline-flex;
  text-align: center;
  overflow: hidden;
  line-height: 3rem;
  margin-top: 1rem;
  border-bottom: 2px solid rgba(247, 139, 15, 1);
}
.tabswitch div {
  width: 8.6rem;
  height: 3rem;
  opacity: 1;
  font-size: 1.4rem;
}
.tabsuw {
  background: #f78b0f;

  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  font-size: 1.4rem;
}
.jinchun_text {
  margin-top: 1.2rem;
}
.jinchun_a {
  display: flex;
  margin-top: 1.2rem;
}
.jinchun_a_div {
  width: 12rem;
  height: 8rem;
}
.jinchun_a_div img {
  width: 100%;
  height: 100%;
}
.jinchun_b_div {
  width: 22.5rem;
  height: 8rem;
  margin: 0rem 0rem 0rem 0.8rem;
}
.jinchun_b_div p:nth-child(1) {
  font-size: 1.4rem;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.8);
  margin-top: 0.6rem;
  margin-bottom: 1rem;
  /* line-height: 22px; */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* 换行2段 */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.jinchun_b_div p:nth-child(2) {
  font-size: 1.3rem;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
}
</style>